<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">并条实时数据</view>
		</cu-custom>
		<sear-ch :placeholder="placeholder" @clean="clean" @input="input" @remove="remove" :message="message"></sear-ch>
		<screen-view ref="screen" @formSubmit="formSubmit" :isShow="false" :searchCondition="searchCondition" :dateisShow="false"></screen-view>
		<view class="cu-list grid col-3 no-border" style="margin-top: 110rpx;">
			<block v-for="(item,index) in deliverplan" :key="index">
				<view class="cu-item" v-if="item.isShow" @tap="tableSelect(item)">
					<text>{{item.LCLASSINDEX}}{{item.LMACHINENO}}#</text>
					<image style="width: 60rpx;height: 60rpx;" :src="item.url" mode="aspectFit"></image>
					<text>{{item['运行状态']}}</text>
				</view>
			</block>
		</view>
		<scroll-view v-if="scrollisShow" scroll-y :class="['DrawerWindow','dopoutl','text-red',modalName]" :style="{height : height / 2 + 'px',}">
			<view class="triangle" @tap="ison">
				<view :class="['cuIcon-up','cuIcon-fold',viewName]" style="color: #fff;font-size:50rpx;"></view>
			</view>
			<view style="padding-top: 50rpx;">
				<view :class="[paddName=='move-box-'+ index?'move-cur':'']" v-for="(item,index) in statelist" :key="index">
					<view v-if="item['运行记录'] == '' ? false : true">
						<view class="" style="display: flex;flex-wrap: nowrap;height: 100rpx;line-height: 100rpx;" @touchstart="ListTouchStart"
						 @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
							<view class="center" style="flex:3">
								<view>{{item.LCLASSINDEX}}{{item.LMACHINENO}}#</view>
							</view>
							<view class="center" style="flex:3">
								<view>{{item.date}}</view>
							</view>
							<view class="center" style="flex:6">
								<text>{{item['运行记录'] == '' ? "空" : item['运行记录']}}</text>
							</view>
						</view>
						<view class="move " @tap="datele(index)">
							<view class="bg-red center" style="height: 100%;line-height: 100%;">删除</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import SearCh from "@/colorui/components/search.nvue"
	import ScreenView from '@/colorui/components/ScreenView.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		inputSearch,
	} from "@/mixin/mixin.js"
	import {
		getMachineList
	} from '@/service/selectList'
	export default {
		mixins: [inputSearch],
		data() {
			return {
				placeholder: "机器号",
				height: this.screenHeight,
				message: "筛选",
				List: {},
				modalName: 'isonOpen',
				viewName: 'isviewOpen',
				paddName: null,
				listTouchStart: 0,
				scrollisShow: true,
				slate: '',
				listTouchDirection: null,
				statelist: [],
				dateleft: global.dateleft,
				dateright: global.dateright,
				searchCondition: [{
					name: '机器号',
					code: 'LMACHINENO',
					checked: true
				}, ],
				searchView: 'LMACHINENO',
				deliverplan: []
			}
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround'])
		},
		components: {
			SearCh,
			ScreenView
		},
		beforeDestroy() {
			this.closeSocket();
		},
		onLoad() {
			getMachineList('并条').then(res => {
				for (let item of res.data) {
					item['isShow'] = true
					item['运行状态'] = ''
					item['url'] = '/static/images/start.png'
				}
				this.deliverplan = res.data
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					// url: "ws://192.168.31.29:8888/machine",
					url: "ws://" + uni.getStorageSync('IP').split("//")[1] + ':8888/' +
						"/machine",
					success(data) {
						console.log("websocket连接成功");
					},
				});
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				// console.log( this.deliverplan[i].LMACHINENO);
				let data = {
					// "procedure": "粗纱"/
					"machine": 'BT'
					// "type": 0
				}
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					// this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					// setInterval(()=> {
					this.socketTask.send({
						data: JSON.stringify(data),
						async success() {
							console.log("消息发送成功");
						},
					});
					// },1000)
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						let mydata = JSON.parse(res.data)
						console.log(mydata);
						for (let value of this.deliverplan) {
							for (let index in mydata) {
								if (value.LMACHINENO == index) {
									// value['运行状态'] = mydata[index]['当前车速']
									// value['运行记录'] = mydata[index]['运行记录'].join()
									console.log(mydata[index]['当前车速']);
									if (mydata[index]['当前车速'] == '0') {
										value['运行状态'] = '停车'
										value['url'] = '/static/images/end.png'
									} else {
										value['运行状态'] = '运行'
										value['url'] = '/static/images/start.png'
									}
									// value['date'] = utils.timeTodate('H:i', new Date().getTime())
									// if (mydata[index]['运行记录'] != '') {
									// 	this.statelist.push(Object.assign(mydata[index], value))
									// 	for (let i = 0; i < this.statelist.length; i++) {
									// 		for (let j = i + 1; j < this.statelist.length; j++) {
									// 			if (this.statelist[i]['运行记录'] === this.statelist[j]['运行记录'] && this.statelist[i]['LMACHINENO'] ===
									// 				this.statelist[
									// 					j]['LMACHINENO']) {
									// 				this.statelist.splice(j, 1);
									// 				j = j - 1;
									// 			}
									// 		}
									// 	}
									// } else {
									// 	if(this.statelist == '') {
									// 		this.statelist = []
									// 		console.log('等于空');
									// 	}
									// }
								}
							}
						}
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				});
			})
		},
		methods: {
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						// this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			tableSelect(e) {
				uni.navigateTo({
					url: `./timedataDarwingdetail?name=${e.LMACHINENO}&LPRCTYPE=${e.LPRCTYPE}&LMACHINETYPE=${e.LMACHINETYPE}`
				})
			},
			formSubmit(e) {
				console.log(e);
			},
			ison() {
				this.modalName = (this.modalName == 'isonOpen' ? 'isonClose' : 'isonOpen')
				this.viewName = (this.viewName == 'isviewOpen' ? 'isviewClose' : 'isviewOpen')
			},
			//删除
			datele(index) {
				this.statelist.splice(index, 1)
				this.paddName = null
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.paddName = e.currentTarget.dataset.target
				} else {
					this.paddName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>


<style lang="scss" scoped>
	.dopoutl {
		position: fixed;
		bottom: 0;
		background-color: rgba(76, 76, 76, 0.95);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.center {
			display: flex;
			font-size: 36rpx;
			justify-content: center;
			align-items: center;
		}

		.triangle {
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: rgba(76, 76, 76, 0.95);
			position: fixed;
			z-index: 9;
			height: 50rpx;
			width: 100%;
		}

		.move-cur {
			transform: translateX(-100rpx);
		}

		.move {
			position: absolute;
			right: 0;
			top: 0;
			width: 100rpx;
			height: 100%;
			transform: translateX(100%);
			text-align: center;
		}
	}

	.isonOpen {
		transform: translateY(0%);
	}

	.isviewOpen {
		transform: rotate(180deg);
	}

	.isviewClose {
		transform: rotate(0deg);
	}

	.isonClose {
		transform: translateY(93%);
	}

	.DrawerWindow {
		transition: all 0.3s ease-in-out;
		overflow: hidden;
	}
</style>
